<template>
		<div>
 		 <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="true" >
		
		<div class="settlement">
		 	 <div class="pershares" v-for="(item,index) in lists" @click="detail(item.id,item.status)">
		      <div class="title">
		        <div class="big">
		        	<p>{{item.equityName}}</p>
		          <span>{{item.equityCode}}</span>
		        </div>
		        <div class="mCenter">
		        	  <p><span class="span" :class="color(item.profitCount)">{{item.profitCount,item.status | toDot}}</span>元</p>
		        	  <span >盈利分配</span>
		        </div>
		        <div class="mRight">
		        	  <p><span class="span" :class="color(item.profitCount)">{{item.tradeProfit,item.status | toDot}}</span>元</p>
		        	  <span>交易分配</span>
		        </div>
		        <img src="../../assets/arrow_right.png"/>
		      </div>
		      <div class="content">
		        <div class="grey">
		          <div class="Purchase">
		            	买入&nbsp;&nbsp;{{item.buyDealPrice | toDot}}&nbsp;&nbsp;
		            	卖出&nbsp;&nbsp;{{item.sellDealPrice | toDot}}
		          </div>
		          <div class="time" >
			      	 		卖出时间:{{item.sellDealTime}}
			      	</div>
		        </div>
		        
		        <div class="right">
		          <span>{{item.status | toDoT2}}</span>
		        </div>
		      </div>
		      
		      
		      <div class="msg" v-show='flag==index'>
		        <p>
		          {{item.msg}}
		        </p>
		      </div>
		    </div>
		    
		  
		</div>
		
    </mt-loadmore> 
    <div style="margin:3.5rem auto;" v-show="lists.length==0">
		    	<img  style="display: block; margin: 0 auto; width: 2.66666rem; height: 2.66666rem;" src="../../assets/default_record.png" />
		    	<p style="color: #037b91; text-align: center; margin-top:0.266rem ;">暂无数据</p>
	 </div>
	 </div>
   
</template>

<script>
import deal from '@/api/deal/index'
import { toast} from '@/util/index'
import {Loadmore} from 'mint-ui'
import Content from '@/components/ContentBottom2'
import Button from '@/components/Button2'
export default {
  data() {
    return {
      flag: -1,
      lists: [],
      totalPage:"",
      pageNo:1,
      allLoaded: false, 
      scrollMode:"auto",// iphone或安卓机存在问题
    }
  },
  components: {
        'mt-loadmore':Loadmore,
        'v-Content': Content,
        "v-Button":Button,
	},
  methods: {
  	detail(num,val){
  		if(val==8){
  			return;
  		}
  		this.$router.push({
		            path: '/dealDetail/', 
		            name: 'dealDetail',
		            query: { 
		                id: num
		            }
		           
		        })
  	},
		color(num){
			if(num<=0){
				return "green";
			}
		},
		loadTop() {
			  	this.$refs.loadmore.onTopLoaded();
		},
		loadBottom() {
        this.pageNo += 1;
        if (this.pageNo == this.totalPage) {
          this.allLoaded = true;
        }
        setTimeout(() => {
	        let senddata = {
						page:this.pageNo,
						userId:window.localStorage.getItem("token"),
						plat:"mlj"
					}
					deal.listJson(senddata).then(res=>{
			            if(res.data.code==200){
			                this.lists = this.lists.concat(res.data.data.list);
								this.$refs.loadmore.onBottomLoaded();
								this.$nextTick(function () {  
					            // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，  
					            // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，  
					            // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好  
				            	this.scrollMode = "touch";  
				            	
				            	
					        	});  
			            } else{
			            	// console.log(res);
			            }
			      	})
        }, 1500);
    },
    loadBottomUse(){
    	console.log("上拉刷新");
    },
    
  },
  filters:{
  	toDot(val,status){
  		if(status!=7){
  			if(val==""||val==null){
	  			return "--"
	  		}else{
	  			return val
	  		}
  		}else{
  			
	  			return val
	  	
  		}
  		
  	},
  	toDoT2(val){
  		if(val==7){
  			 return "已结算";
  		}else if(val==8){
  			 return "流单";
  		}
  		
  	}
  },
  mounted(){
  	let senddata = {
			userId:window.localStorage.getItem("token"),//this.$store.state.token
			page:1,
			plat:"mlj"
		}
		deal.listJson(senddata).then(res=>{
        if(res.data.code==200){
           	this.lists=res.data.data.list;
           	this.totalPage=res.data.data.totalPage;
        } else if(res.data.code==222){
            this.$router.push({path:'/login'})
        }else{
        	 console.log(res);
        }
  	})
  	
  	
  }
}
</script>


<style lang="less" scoped>
@import '../../less/config.less';
.settlement {
  width: 100%;
  height: auto;
  overflow: auto;
  background-color: @bgColor;
  -webkit-overflow-scrolling: touch;
  .pershares {
    width: 100%;
    padding: 0 @p30;
    background-color: @liBg;
    margin-bottom: @marginbm;
  }
  .title {
    height: 1.6rem;
    
    font-size: 0.48rem;
    color: @fcolor;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img{
    	width: @f28;
    	height: @f28;
    }
    div {
      display: inline-block;
    }
    span {
      color: @Color;
      font-size: 0.32rem;
    }
    .mCenter,.mRight{
    	font-size: @f24;
    	color: white;
    	p{
    		margin-bottom: .2rem;
    	}
    	.span{
    		font-size: @f32;
    		color: #FF335B;
    	};
    	.green{
    		color: #33ffc3;
    	}
    }
  }
  .content {
    color: #ff335b;
    font-size: 0.37333rem;
    border-top: solid 1px #262a35;
   
    display: flex;
    justify-content: space-between;
    align-items: center;
    .grey {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-direction: column;
      color: #babbbc;
      font-size: @f24;
      span {
        display: block;
      }
      .red{
        color:#ff335b;
      }
      .dif{
        font-size: 0.37333rem;
      }
      .Purchase{
      	color: #babbbc;
      	margin:0.24rem  0  @f28;
      }
      .time{
      	color: #babbbc;
      	margin-bottom: 0.37333rem;
      }
    }
    .right {
      width: 1.6rem;
      height: 0.8533rem;
      line-height: 0.8533rem;
      text-align: center;
      font-size: @f32;
      color: @fcolor;
      background-color: #ccc;
      border-radius: 0.08rem;
    }
  }
  .detals {
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    color: @actColor;
  }
  .msg {
    line-height: 1.8;
    background-color: @liBg;
    color: @Color;
    text-align: center;
  }
}
</style>